<template>
	<view class="nav-tap">
		<view class="nav-tap-wrap">
			<view class="taps-wrap">
				<view :class="tapindex==index?'taps-wrap-sub2':'taps-wrap-sub'" v-for="(item,index) in tapsData"
					@click="clickTapItem(item,index)">
					<text>{{item.value}}</text>
					<text v-if="item.num!=0" class="tips-num">{{item.num}}</text>
				</view>
			</view>
			<view class="select-wrap" >
				<view class="group-wrap" v-if="isShowType">
					<jPicker :disabled="false" class="picker-view" @selecAttedance='selecAttedance'
						@seclecWorkGroup='seclecWorkGroup' @sure="seclecWorkGroup($event,'TYPE')" showKey="label"
						valKey="label" clickValue='类别' :options="workGroupeOptions"> </jPicker>
				</view>
				<picker :value="periodIndex" @change="selecAttedance" class="picker-view" :range="attedanceOptions"
					range-key="yearmth">
					<view class="kaoqin" v-if="isShowPeriod">
						<view class="group-title">{{periodValue}}</view>
						<span class="iconfont icon-paixujiantouxia iconJiantou"></span>
					</view>
				</picker>
			</view>
		</view>
	</view>
</template>

<script>
	import jPicker from '../j-picker/j-picker.vue'
	export default {
		name: "nav-tabs-leave",
		data() {
			return {
				tapindex: this.defaultIndex,
				value: '',
			};
		},
		components: {
			jPicker
		},
		props: {
			tapsData: {
				type: Array,
				default: () => [{
					value: '未审核',
					num: 10
				}, {
					value: '已审核',
					num: 10
				}]
			},
			workGroupeOptions: {
				type: Array,
			},
			attedanceOptions: {
				type: Array,
			},
			periodValue: {
				default: '期间'
			},
			isShowPeriod: {
				default: true,
			},
			isShowType: {
				default: true,
			},
			periodIndex: '',
		},
		methods: {
			clickTapItem(item, index) {
				this.tapindex = index
				let obj = {
					item: item,
					index: index
				}
				this.$emit('tapChange', obj)
			},
			selecAttedance(value) {
				let propValue = this.attedanceOptions[value.detail.value]
				this.$emit('attedanceChange', propValue)
			}, //传出考勤的value与事假
			seclecWorkGroup(value) {
				let propValue = value.value
				this.workValue = value.label
				this.$emit('workChange', propValue)
			}, //传出班组的value与事假
		},
		created() {
			this.tapindex = 0
		}
	}
</script>

<style lang="scss">
	.group-title{
		transform: scale(0.9);
	}
	.iconJiantou{
		transform: scale(0.9);
	}
	.tips-num {
		position: absolute;
		text-align: center;
		line-height: 38rpx;
		color: #FFFFFF;
		top: 8rpx;
		font-size: 24rpx;
		width: 30rpx;
		height: 38rpx;
		border-radius: 40%;
		background: red;
	}


	.nav-tap {
		width: 100%;
		height: 90rpx;
		position: fixed;
		top: 0;
		background: #ffffff;
		border-bottom: 2rpx solid #dedede;

		.nav-tap-wrap {
			display: flex;
			justify-content: space-between;
			height: 100%;
			align-items: center;
			padding: 0 36rpx;

			.taps-wrap {
				display: flex;
				align-items: center;

				.taps-wrap-sub {
					width: 150rpx;
					font-size: 28rpx;
					color: #757575;
				}

				.taps-wrap-sub2 {
					width: 150rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #0089FF;
				}
			}

			.select-wrap {
				display: flex;
				justify-content: space-between;
				height: 100%;
				align-items: center;

				.select-group-wrap {
					display: flex;
					align-items: center;
					height: 60rpx;
					padding-left: 10rpx;
					font-size: 24rpx;
					background: #0089FF;
					color: #ffffff;
					border-radius: 6rpx;
				}
				.select-group-wrap2 {
					max-height: 60rpx;
					display: flex;
					align-items: center;
					padding: 10rpx 10rpx;
					padding-left: 20rpx;
					font-size: 24rpx;
					background: #d9d9d9;
					color: #434343;
					margin-left: 20rpx;
					border-radius: 6rpx;
				}
			}
		}
	}

	.kaoqin {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60rpx;
		padding-left: 10rpx;
		font-size: 24rpx;
		background: #0089FF;
		color: #ffffff;
		margin-left: 20rpx;
		border-radius: 6rpx;
	}

	.iconJiantou {
		font-size: 24rpx;
	}
</style>
